<template>
  <transition name="fade-scale">
    <div v-if="visible" class="toast" :class="type">
      {{ message }}
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const message = ref('')
const type = ref('info')
let timer = null

function show(msg, msgType = 'info', duration = 2500) {
  message.value = msg
  type.value = msgType
  visible.value = true
  clearTimeout(timer)
  timer = setTimeout(() => {
    visible.value = false
  }, duration)
}

// eslint-disable-next-line
defineExpose({ show })
</script>

<style scoped>
.toast {
  position: fixed;
  top: 70px; /* 往下了一点 */
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 6px;
  color: white;
  font-size: 15px;
  font-weight: 500;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* 颜色区分 */
.toast.success {
  background-color: #16a34a; /* 绿色 */
}
.toast.error {
  background-color: #dc2626; /* 红色 */
}
.toast.warning {
  background-color: #d97706; /* 橙色 */
}
.toast.info {
  background-color: #2563eb; /* 蓝色 */
}

/* 动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.25s ease;
}
.fade-scale-enter-from {
  opacity: 0;
  transform: translate(-50%, -15px) scale(0.95);
}
.fade-scale-leave-to {
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.95);
}
</style>
